<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        .carousel {
            position: relative;
            width: 880px;
            height: 550px;
            border: 1px solid #333;
            margin: 50px auto;
        }
        
        .pic li {
            position: absolute;
            left: 0;
            top: 0;
            width: 880px;
            height: 550px;
            display: none;
        }
        
        .pic li.current {
            display: block;
        }
        
        .btn a {
            position: absolute;
            top: 50%;
            width: 80px;
            height: 80px;
            margin-top: -40px;
            background-color: rgba(255, 255, 255, 0.3);
            text-decoration: none;
            color: #444;
            text-align: center;
            line-height: 80px;
            font-size: 60px;
            font-family: "SimSun";
        }
        
        .btn .left {
            left: 10px;
        }
        
        .btn .right {
            right: 10px;
        }
        
        .btn a:hover {
            background-color: rgba(255, 255, 255, 0.7);
        }
        
        .sub {
            position: absolute;
            bottom: 30px;
            left: 50%;
            width: 200px;
            height: 40px;
            margin-left: -100px;
            border-radius: 20px;
            background-color: rgba(255, 255, 255, 0.3);
        }
        
        .sub li {
            float: left;
            width: 20px;
            height: 20px;
            margin: 10px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
        }
        
        .sub li.current {
            background-color: #0ff;
        }
    </style>
</head>

<body>
    <div class="carousel" id="carousel">
        <ul class="pic" id="pic">
            <li class="current"><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/05.jpg" alt=""></li>
        </ul>
        <div class="btn" id="btn">
            <a href="javascript:;" class="left" id="leftbtn">&lt;</a>
            <a href="javascript:;" class="right" id="rightbtn">&gt;</a>
        </div>
        <ol class="sub" id="sub">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script src="common.js"></script>
    <script>
        var carousel = my$('carousel');
        var ul = my$('pic');
        var ulis = ul.children;
        var ol = my$('sub');
        var ols = ol.children;
        var leftBtn = my$('leftbtn');
        var rightBtn = my$('rightbtn');
        var index = 0; //数组下标量（默认显示位置）

        rightBtn.onclick = rightHandle;

        //左按钮点击事件
        leftBtn.onclick = function() {
            index--;

            if (index < 0) {
                index = ulis.length - 1;
            }

            indexSet();

        };


        //小圆点的点击事件
        for (var i = 0; i < ols.length; i++) {

            //设置当前点击圆点下标
            ols[i].index = i;

            addEvent(ols[i], "click", function() {

                index = this.index;

                indexSet();
            });

        }

        //自动播放事件
        var timer;
        timer = setInterval(rightHandle, 3000);

        carousel.onmouseover = function() {
            clearInterval(timer);
        };
        // 7.鼠标离开轮播图，重新开始自动轮播
        carousel.onmouseout = function() {
            timer = setInterval(rightHandle, 3000);
        };


        function rightHandle() {

            index++; //下标计数

            //越界处理
            if (index > ulis.length - 1) {
                index = 0;
            }

            indexSet();
        };


        function indexSet() {
            //清除所有效果
            for (var i = 0; i < ulis.length; i++) {
                ulis[i].className = "";
                ols[i].className = "";
            }

            ulis[index].className = "current";
            ols[index].className = "current";
        };
    </script>
</body>

</html>